<template>
  <div class="date">
    <el-date-picker
      :style="{width: `${isHasButton?'200px':'100%'}`}"
      size="mini"
      ref="picker"
      v-bind="$attrs"
      v-on="$listeners"
      :type="type"
      v-model="dateVal"
      @change="$emit('input',dateVal)">
    </el-date-picker>
    <div class="button" v-if="isHasButton">
      <el-button size="mini" @click="toLastMon">{{lastDayName}}</el-button>
      <el-button size="mini" @click="toCurrMon">{{currDayName}}</el-button>
      <el-button size="mini" @click="toNextMon">{{nextDayName}}</el-button>
    </div>
  </div>
</template>

<script>
  import mixinInfo from './mixin'
  import {debounce} from '@/util'
  export default {
    name: "day_picker",
    mixins:[mixinInfo],
    props:{
      value:String | Date | Number
    },
    data(){
      return {
        dateVal:''
      }
    },
    computed:{
      picker(){
        return this.$refs.picker
      },
      time(){
        return this.picker.parsedValue?this.picker.parsedValue:new Date()
      }
    },
    methods:{
      doChange(){
        this.dateVal = this.picker.formatToValue(this.dateVal)
        this.$emit('input',this.dateVal)
        this.$emit('change',this.dateVal)
      },
      toLastMon:debounce(function(){
        let date = this.time;
        switch (this.type) {
          case 'month':
            this.dateVal = new Date(date.setMonth(date.getMonth()-this.intervalNum))
            break
          case 'date':
            this.dateVal = new Date(date.setDate(date.getDate()-this.intervalNum))
            break
          case 'year':
            this.dateVal = new Date(date.setFullYear(date.getFullYear()-this.intervalNum))
            break
        }
        this.$nextTick(()=>this.doChange())
      }),
      toCurrMon:debounce(function(){
        this.dateVal = new Date();
        this.$nextTick(()=>this.doChange())
      }),
      toNextMon:debounce(function(){
        let date = this.time;
        switch (this.type) {
          case 'month':
            this.dateVal = new Date(date.setMonth(date.getMonth()+this.intervalNum))
            break
          case 'date':
            this.dateVal = new Date(date.setDate(date.getDate()+this.intervalNum))
            break
          case 'year':
            this.dateVal = new Date(date.setFullYear(date.getFullYear()+this.intervalNum))
            break
        }
        this.$nextTick(()=>this.doChange())
      }),
    },
  }
</script>
<style scoped>
  .date{
    position: relative;
    height: 28px;
    display: inline-flex;
    line-height: 100%;
  }
  .button{
    margin-left: 10px;
  }
</style>
